<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑客户信息</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
    <style>
        body {
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%);
            font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 24px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            max-width: 520px;
            width: 100%;
            padding: 40px 36px 36px 36px;
            margin: 40px auto;
            /* animation: fadeIn 1.2s cubic-bezier(.39,.575,.56,1.000); */
        }
        /* @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        } */
        .form-label {
            font-weight: 600;
            color: #2563eb;
        }
        .btn {
            border-radius: 12px !important;
            font-weight: 600;
            transition: transform 0.18s, box-shadow 0.18s;
        }
        .btn:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 6px 24px rgba(37,99,235,0.13);
        }
        h2 {
            text-align: center;
            color: #2563eb;
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: 2px;
            margin-bottom: 32px;
            text-shadow: 0 2px 8px rgba(37,99,235,0.08);
        }
        .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        .form-control.is-invalid {
            border-color: #dc3545;
        }
    </style>
</head>
<body>
<div class="glass-card">
    <h2>编辑客户信息</h2>
    
    <!-- 错误提示 -->
    <div th:if="${error}" class="alert alert-danger" role="alert" th:text="${error}"></div>
    
    <form th:action="@{/admin/user/edit}" method="post" id="userForm">
        <input type="hidden" name="customerID" th:value="${user.customerID}" />
        <div class="mb-3">
            <label class="form-label">姓名</label>
            <input type="text" class="form-control" name="customerName" th:value="${user.customerName}" required />
        </div>
        <div class="mb-3">
            <label class="form-label">身份证号</label>
            <input type="text" class="form-control" name="pid" id="pid" th:value="${user.pid}" 
                   maxlength="18" placeholder="请输入18位身份证号" required />
            <div class="error-message" id="pidError" style="display: none;"></div>
        </div>
        <div class="mb-3">
            <label class="form-label">电话</label>
            <input type="text" class="form-control" name="telephone" th:value="${user.telephone}" required maxlength="11" pattern="^\d{11}$" id="telephone" placeholder="请输入11位手机号" />
            <div class="error-message" id="telError" style="display:none;"></div>
        </div>
        <div class="mb-3">
            <label class="form-label">地址</label>
            <input type="text" class="form-control" name="address" th:value="${user.address}" />
        </div>
        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">保存</button>
            <a href="/admin/user" class="btn btn-link">返回列表</a>
        </div>
    </form>
</div>

<script>
// 身份证号验证函数
function validateIdCard(idCard) {
    if (!idCard || idCard.trim() === '') {
        return '身份证号不能为空';
    }
    
    const trimmedIdCard = idCard.trim();
    
    if (trimmedIdCard.length !== 18) {
        return '身份证号必须是18位';
    }
    
    // 检查前17位是否都是数字
    for (let i = 0; i < 17; i++) {
        if (!/\d/.test(trimmedIdCard.charAt(i))) {
            return '身份证号前17位必须是数字';
        }
    }
    
    // 检查最后一位是否为数字或大写X
    const lastChar = trimmedIdCard.charAt(17);
    if (!/\d/.test(lastChar) && lastChar !== 'X') {
        return '身份证号最后一位必须是数字或大写X';
    }
    
    return null; // 验证通过
}

// 实时验证身份证号
document.getElementById('pid').addEventListener('input', function() {
    const pid = this.value;
    const errorDiv = document.getElementById('pidError');
    const error = validateIdCard(pid);
    
    if (error) {
        this.classList.add('is-invalid');
        errorDiv.textContent = error;
        errorDiv.style.display = 'block';
    } else {
        this.classList.remove('is-invalid');
        errorDiv.style.display = 'none';
    }
});

// 手机号实时校验
const telInput = document.getElementById('telephone');
const telError = document.getElementById('telError');
telInput.addEventListener('input', function() {
    this.value = this.value.replace(/\D/g, '').slice(0, 11);
    if (!/^\d{11}$/.test(this.value)) {
        telError.textContent = '手机号必须为11位数字';
        telError.style.display = 'block';
        this.classList.add('is-invalid');
    } else {
        telError.textContent = '';
        telError.style.display = 'none';
        this.classList.remove('is-invalid');
    }
});

// 表单提交校验
const userForm = document.getElementById('userForm');
userForm.addEventListener('submit', function(e) {
    if (!/^\d{11}$/.test(telInput.value)) {
        e.preventDefault();
        telError.textContent = '手机号必须为11位数字';
        telError.style.display = 'block';
        telInput.classList.add('is-invalid');
        alert('请检查手机号格式！');
    }
});
</script>
</body>
</html> 